<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
    <div id="app" v-bind:title="message"  > <p>Hover your mouse over me for a few seconds to see my dynamically bound title! {{message|capitalize}}<br/>
        {{reversedMessage}}
        </p>
        <input type="text" v-model="message"/>
    <button v-on:click="b_click">click</button></div>
    
    <ol id="component">
        <list_item v-for="(item,key,index) in listData" v-bind:item="item" v-bind:key="key"></list_item>
    </ol>
<script type="text/javascript" >
    Vue.component( "list_item",{
        props:["item"],
        template:' <li>{{ item }}</li> '
    } )
    var app=new Vue({
        el:"#app",
        data:{
            message:"bind title"
        }
        ,filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
    
    ,computed:{
        reversedMessage:{
            get: function(){
                console.log("get "+this.message)
            return this.message.split('').reverse().join("")
            }
        
            ,set:function(newValue){
                console.log("set "+newValue)
            }
            
        }
    }
   , methods:{
       b_click:_.debounce(function(){
           this.message="Thinking ..."
           axios.get('https://yesno.wtf/api')
               .then(function(response){
                   console.log("response "+response)
                   this.message="response "
               })
               .catch(function(err){
                   console.log("err")
                   this.message="Error "+err
               })

            <!-- this.message=this.message+ " "+new Date() -->

        })

      }
    ,watch:{
        reversedMessage: function(newValue){
            console.log("watch "+newValue)
        }
    }
  })
    var component=new Vue({
        el:"#component",
        data:{
            listData:[1,2,3,4]
        }
    })
</script>    
</body>
</html>
